<template>
  <el-container class="height100 marginL10">
    <el-main class="el-mainContent paddingLeft0 height100 overflowYHidden" ref="managerMain">
      <el-row class="obpm-fromContent-title obpm-enterpriseDomain-logo normalHeight" ref="normalHeight">
        <el-col :span="16" class="normalLineH">
          <i class="fa fa-user" aria-hidden="true"></i>
          {{$t('manager_list')}}
        </el-col>
        <el-col :span="8" style="text-align:right" class="normalLineH">
          <el-button type="primary" @click="userSelectVisible = true" size="small">{{$t('add')}}</el-button>
          <el-button @click="removeManager" size="small" plain>{{$t('remove')}}</el-button>

        </el-col>
      </el-row>

      <el-row ref="search">
        <el-col :span="16">
          <el-form :inline="true" :model="searchdata" class="form-inline paddingT10" size="mini"  @submit.native.prevent>
            <el-form-item>
              <el-input v-model="searchdata.data.name" :placeholder="$t('name')" @keyup.enter.native="searchTableData"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" plain @click="searchTableData">{{$t('query')}}</el-button>
              <el-button @click="resetSearchTableData">{{$t('reset')}}</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="8" class="align-right"></el-col>
      </el-row>

      <!-- 管理员列表 -->
      <el-table 
        stripe
        :data="managers.datas"
        ref="multipleTable"
        :row-key="handleReserve" 
        @selection-change="handleSelectionChange"
        header-cell-class-name="tableHeaderbg"
        size="small"
        :height="tableListConHeight">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="name" :label="$t('username')"></el-table-column>
        <el-table-column prop="loginno" :label="$t('loginno')"></el-table-column>
        <el-table-column prop="email" :label="$t('email')"></el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        ref="pagination"
        @size-change="handleSizeChange"
        @current-change="searchTableData"
        :current-page.sync="searchdata.currpage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="searchdata.pagelines"
        layout="prev, pager, next, total, sizes"
        background
        :total="managers.rowCount?managers.rowCount:0"
        
      ></el-pagination>
    </el-main>
    <user_select :visible.sync="userSelectVisible" v-if="userSelectVisible" @select-ok="onSelectUserOk" :key="selectTimer"/>
  </el-container>
</template>

<script>
import user_select from "@/components/user_select.vue";
export default {
  components: { user_select },
  created() {
    this.searchTableData();
  },
  mounted(){
    // var h = document.documentElement.clientHeight || document.body.clientHeight;
    this.tableListConHeight=this.$refs.managerMain.$el.getClientRects()[0].height-this.$refs.normalHeight.$el.getClientRects()[0].height-this.$refs.search.$el.getClientRects()[0].height-this.$refs.pagination.$el.getClientRects()[0].height - 20; // 20 main的padding
    
  },
  data() {
    return {
      userSelectVisible: false,
      searchdata: {
        currpage:1,
        pagelines:10,
        data:{
          name: "",
        }
      },
      managers: [],
      multipleTable:[],
      multipleSelection:[],
      selectTimer:'',
      tableListConHeight:null,
    };
  },

  methods: {
    resetSearchTableData(){
      this.searchdata.data.name='';
      this.searchTableData()
    },
    searchTableData() {
      // name: this.searchdata.name ,currpage:this.searchdata.currpage,pagelines:this.searchdata.pagelines
      this.$api.getDomainManagers(

        { domainid: this.$route.query.domainid, ...this.searchdata},
        {
          onSucess: resp => {
            this.managers = resp.data.data;
            this.$nextTick(() => {
            this.$refs.multipleTable.doLayout()
          })
          }
        }
      );
    },

    onSelectUserOk(users) {
      let ids = [];
      users.forEach(user => {
        ids.push(user.id);
      });
      this.$api.addDomainManagers(
        { domainid: this.$route.query.domainid, data: ids },
        {
          onSucess: resp => {
            if (resp.data.errcode == 0) {
              this.$message({
                showClose: true,
                message: this.$t('msg_add_success'),
                type: "success"
              });
              this.selectTimer = new Date().getTime();
              this.searchTableData();
            } else {
              this.$message({
                showClose: true,
                message: resp.data.errmsg,
                type: "error"
              });
            }
          }
        }
      );
      
    },
    removeManager(){
      if(this.multipleSelection.length>0){
        this.$api.deleteDomainManagers(this.$route.query.domainid,
          {data:this.multipleSelection},
          {
            onSucess: resp => {
              if(resp.data.errcode==0){
                this.$message({
                  message: this.$t('msg_remove_success'),
                  type: "success"
                });
                this.selectTimer = new Date().getTime();
                this.searchTableData();
              }else{
                this.$message({
                  message: resp.data.errmsg,
                  type: "error"
                });
                this.searchTableData();
              }
              
            }
          }
        );
      }else{
        this.$message({
          message: "请先选择一个管理员",
          type: "error"
        });
      }
      
    },
    handleReserve(row){
      return row.id
    },
    handleSelectionChange(val) {
      var arr = [];
       val.forEach((val) => {
        this.managers.datas.forEach((v) => {
          if(val.id == v.id){
            arr.push(val.id)
          }
        })
      })   
      this.multipleSelection = arr;
    },
    handleSizeChange(size){
      this.searchdata.pagelines=size;
      this.searchTableData();
    },
  }
};
</script>

<style>
</style>